// importM
import 'package:flutter/material.dart';
import 'package:flutterdemo/res/listData.dart';
// ignore: unused_import
import './MyIcon.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter App", style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.deepPurple,
        ),
        body: BuilderImgBox(),
      ),
    );
  }
}

// count
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      // 一行显示的数量
      crossAxisCount: 3,
      children: [
        Icon(MyIcon.apex),
        Icon(MyIcon.epic),
        Icon(MyIcon.github),
        Icon(MyIcon.steam),
        Icon(MyIcon.warframe),
        Icon(MyIcon.gitlab),
      ],
    );
  }
}

// extent
class HomePage1 extends StatelessWidget {
  const HomePage1({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      // 横轴子元素最大长度
      maxCrossAxisExtent: 120,
      children: [
        Icon(MyIcon.apex),
        Icon(MyIcon.epic),
        Icon(MyIcon.github),
        Icon(MyIcon.steam),
        Icon(MyIcon.warframe),
        Icon(MyIcon.gitlab),
      ],
    );
  }
}

// ignore: camel_case_types
class box extends StatelessWidget {
  const box({super.key});

  List<Widget> _initGrid() {
    List<Widget> result = [];
    for (var i = 1; i <= 20; i++) {
      result.add(
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.deepPurpleAccent),
          child: Text("第$i元素", style: TextStyle(fontSize: 25)),
        ),
      );
    }
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      // 内边距
      padding: EdgeInsets.all(10),
      // 配置水平间距
      crossAxisSpacing: 10,
      // 配置垂直间距
      mainAxisSpacing: 10,
      // 每行数量
      crossAxisCount: 2,
      // 子元素宽高比例
      childAspectRatio: 2,
      children: _initGrid(),
    );
  }
}

// ignore: camel_case_types
class extentBox extends StatelessWidget {
  const extentBox({super.key});

  List<Widget> _initGrid() {
    List<Widget> result = [];
    for (var i = 1; i <= 20; i++) {
      result.add(
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.deepPurpleAccent),
          child: Text("第$i元素", style: TextStyle(fontSize: 25)),
        ),
      );
    }
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      // 内边距
      padding: EdgeInsets.all(10),
      // 配置水平间距
      crossAxisSpacing: 10,
      // 配置垂直间距
      mainAxisSpacing: 10,
      // 横轴子元素最大长度
      maxCrossAxisExtent: 200,
      // 子元素宽高比例
      childAspectRatio: 1,
      children: _initGrid(),
    );
  }
}


class ImgBox extends StatelessWidget {
  const ImgBox({super.key});

  List<Widget> _initGrid() {
    return listData.map((res) {
      return Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(color: Colors.deepPurpleAccent),
        child: Column(
          children: [
            Image.network("${res["imageUrl"]}"),
            Text("${res["title"]}", style: TextStyle(fontSize: 15)),
          ],
        ),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      // 内边距
      padding: EdgeInsets.all(10),
      // 配置水平间距
      crossAxisSpacing: 10,
      // 配置垂直间距
      mainAxisSpacing: 10,
      // 每行数量
      crossAxisCount: 2,
      children: _initGrid(),
    );
  }
}

// 使用builder
class BuilderImgBox extends StatelessWidget {
  const BuilderImgBox({super.key});

  Widget _initGrid(context,index) {
      return Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(color: Colors.deepPurpleAccent),
        child: Column(
          children: [
            Image.network("${listData[index]["imageUrl"]}"),
            Text(
                "${listData[index]["title"]}",
                style: TextStyle(fontSize: 15)),
          ],
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(5),
      itemCount: listData.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        // 配置水平间距
        crossAxisSpacing: 10,
        // 配置垂直间距
        mainAxisSpacing: 10,
        // 子元素宽高比例
        childAspectRatio: 0.9,
        // 每行数量
        crossAxisCount: 2,
      ),
      itemBuilder: _initGrid,
    );
  }
}
